<template>
  <!--需预约页面-->
  <div class="ziliao xuyuyue">
    <wv-group title="航班号">
      <wv-input placeholder="请输入航班号" v-model="appointment.flightNumber"></wv-input>
    </wv-group>
    <wv-group title="航班日期" v-model="appointment.flightDate=flightDate">
      <wv-cell
        title="航班日期"
        :value="flightDate"
        is-link
        @click="openPicker('datePicker')"
      />
      <wv-datetime-picker
        type="date"
        ref="datePicker"
        :startDate="maxDate"
        v-model="nowDate"
        @confirm="onConfirm"
      />
    </wv-group>
    <wv-group title="起飞时间" v-model="appointment.takeOffTime=takeOffTime">
      <wv-cell
        title="起飞时间"
        :value="takeOffTime"
        is-link
        @click="openPicker('timePicker')"
      />
      <wv-datetime-picker
        type="time"
        ref="timePicker"
        v-model="demoTime"
        @confirm="onConfirmHour"
      />
    </wv-group>
    <wv-group title="始发地">
      <wv-input placeholder="请输入始发地" v-model="appointment.originatingPlace"></wv-input>
    </wv-group>
    <wv-group title="到达地">
      <wv-input placeholder="请输入到达地" v-model="appointment.destinationPlace"></wv-input>
    </wv-group>
    <wv-group title="姓名">
      <wv-input placeholder="请输入真实姓名" v-model="appointment.userName"></wv-input>
    </wv-group>
    <wv-group title="证件类型" v-model="appointment.identityType">
      <wv-cell
        title="证件类型"
        is-link
        :value="identityType.desc"
        @click.native="identityTypePickerShow = true"
      />
      <wv-picker
        :visible.sync="identityTypePickerShow"
        :columns="identityTypeColumns"
        value-key="desc"
        @confirm="confirmidentityType"
      />
    </wv-group>
    <wv-group title="证件号">
      <wv-input placeholder="请输入证件号" type="number" v-model="appointment.identityNo"></wv-input>
    </wv-group>
    <wv-group title="电话">
      <wv-input placeholder="请输入您的电话号码" type="number" :maxlength="11" v-model="appointment.phone"></wv-input>
    </wv-group>
    <!--如果从积分商城过来时此处隐藏-->
    <wv-cell title="如有相同航班同行人员，请添加" class="other" v-show="isJifen">
      <wv-number-spinner slot="ft" v-model="number" @change="changed"/>
    </wv-cell>
    <div class="person" v-for="i in num">
      <p>同行人员{{i}}</p>
      <wv-group title="姓名">
        <wv-input placeholder="请输入真实姓名" v-model="peerstaffData[i-1].userName" required
                  :validate-mode="{onFocus: false, onBlur: true, onChange: false}"></wv-input>
      </wv-group>
      <wv-group title="证件类型" v-model="peerstaffData[i-1].identityType">
        <wv-cell
          title="证件类型"
          is-link
          :value="peerstaffData[i-1].desc"
          @click.native="peerstaffIdentityTypePickerShow = true,getPeerstaffIndex(i-1)"
        />
        <wv-picker
          :visible.sync="peerstaffIdentityTypePickerShow"
          :columns="identityTypeColumns"
          value-key="desc"
          @confirm="confirmPeerstaffIdentityType"
        />
      </wv-group>
      <wv-group title="证件号">
        <wv-input placeholder="请输入证件号" type="number" v-model="peerstaffData[i-1].identityNo" required
                  :validate-mode="{onFocus: false, onBlur: true, onChange: false}"></wv-input>
      </wv-group>
    </div>

    <div class="model" v-show="isVisible">
      <div class="bg"></div>
      <div class="modelContent">
        <img :src="img" alt="" width="15" @click="isVisible=false">
        是否放弃预约？
        <p class="btn">
          <button @click="goCancel">取消</button>
          <button @click="goConfirm">确定</button>
        </p>
      </div>
    </div>
    <p class="offer" @click="goNext(appointment,peerstaffData)">提交</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {checkAppointmentTime} from '../../utils/http'
  import {Picker, Toast} from 'we-vue'

  export default {
    name: 'xuyuyue',
    props: {},
    data() {
      return {
        img: require('../../assets/close.png'),
        pic: require('../../assets/right.png'),
        isVisible: false,
        demoTime: '06:00',
        nowDate: new Date(),
        maxDate: {type: Date},
        number: 0,
        num: 0,
        isJifen: true,
        peerstaffIndex: '',
        peerstaffIdentityTypePickerShow: false,
        peerstaffData: [],
        identityTypePickerShow: false,
        identityType: [{desc: '身份证', identityType: 1}],
        identityTypeColumns: [
          {
            values: [
              {desc: '身份证', identityType: 1},
              {desc: '护照', identityType: 2},
              {desc: '港澳通行证', identityType: 3},
              {desc: '台胞证', identityType: 4}
            ]
          }
        ],
        appointment: {},
        goods: {}
      };
    },
    methods: {
      changed(num) {
        let length = this.peerstaffData.length;
        if (num > length) {
          let peerstaff = {userName: '', identityType: '1', desc: '身份证', identityNo: ''};
          this.peerstaffData.push(peerstaff);
        }
        if (num < length) {
          this.peerstaffData.splice(length - 1, 1);
        }
        this.num = num;
      },
      goConfirm() {
        this.$router.push({path: '/tijiaodingdan'})
      },
      goCancel() {
        this.$router.push({path: '/guibindetail'})
      },
      onChange(picker, value) {
        console.log(value)
      },
      confirmidentityType(picker) {
        this.identityType = picker.getValues()[0];
        this.appointment.identityType = this.identityType.identityType;
      },
      getPeerstaffIndex(index) {
        this.peerstaffIndex = index;
      },
      confirmPeerstaffIdentityType(picker) {
        let result = picker.getValues()[0];
        let index = this.peerstaffIndex;
        this.peerstaffData[index].identityType = result.identityType;
        this.peerstaffData[index].desc = result.desc;
      },
      openPicker(ref) {
        this.$refs[ref].open()
      },
      onConfirm(value) {
        let message = '';
        if (value !== null && typeof value === 'object') {
          let year = value.getFullYear();
          let month = value.getMonth() + 1;
          let date = value.getDate();
          if (month < 10) {
            month = "0" + month;
          }
          if (date < 10) {
            date = "0" + date;
          }
          message = `${year}-${month}-${date}`;
        } else {
          message = value;
        }
      },
      onConfirmHour: function (value) {
        let message = '';
        if (value !== null && typeof value === 'object') {
          let hour = value.getHour();
          let minute = value.getMinute();
          if (hour < 10) {
            hour = "0" + hour;
          }
          if (minute < 10) {
            minute = "0" + minute;
          }
          message = `${hour}-${minute}`;
        } else {
          let data = value.split(':');
          if (data.length > 0) {
            let hour = Number(data[0]);
            if (hour < 10) {
              hour = '0' + hour;
            }
            value = hour + ":" + data[1];
          }
          message = value;
          this.demoTime = message
        }
      },
      goCheckAppointmentTime(appointment, peerstaffData) {
        checkAppointmentTime(appointment).then(res => {
          if (res.code == 100) {
            let appointmentInfo = JSON.stringify(appointment);
            let peerstaffInfo = JSON.stringify(peerstaffData);
            this.$router.push({
              path: 'tijiaodingdan',
              query: {appointmentInfo: appointmentInfo, peerstaffInfo: peerstaffInfo}
            });
          } else {
            Toast.text(res.info)
          }
        })
      },
      goNext(appointment, peerstaffData) {
        let msg = this.checkFrom(appointment, peerstaffData);
        if (msg.result) {
          this.goCheckAppointmentTime(appointment, peerstaffData);
        } else {
          Toast.text(msg.info)
        }
      },
      checkFrom: function (appointment, peerstaffData) {
        let utils = this.$myUtils;
        let msg = {};
        if (utils.isNull(appointment.flightNumber)) {
          msg['result'] = false;
          msg['info'] = '请输入航班号';
          return msg;
        }
        if (utils.isNull(appointment.flightDate)) {
          msg['result'] = false;
          msg['info'] = '请选择航班日期';
          return msg;
        }
        if (utils.isNull(appointment.takeOffTime)) {
          msg['result'] = false;
          msg['info'] = '请选择起飞时间';
          return msg;
        }
        if (utils.isNull(appointment.originatingPlace)) {
          msg['result'] = false;
          msg['info'] = '请输入始发地';
          return msg;
        }
        if (!utils.checkUserName(appointment.originatingPlace)) {
          msg['result'] = false;
          msg['info'] = '请输入正确的始发地';
          return msg;
        }
        if (utils.isNull(appointment.destinationPlace)) {
          msg['result'] = false;
          msg['info'] = '请输入目的地';
          return msg;
        }
        if (!utils.checkUserName(appointment.destinationPlace)) {
          msg['result'] = false;
          msg['info'] = '请输入正确的目的地';
          return msg;
        }
        if (utils.isNull(appointment.userName)) {
          msg['result'] = false;
          msg['info'] = '请输入真实姓名';
          return msg;
        }
        if (!utils.checkUserName(appointment.userName)) {
          msg['result'] = false;
          msg['info'] = '请输入真实有效姓名';
          return msg;
        }
        if (utils.isNull(appointment.identityType)) {
          msg['result'] = false;
          msg['info'] = '请选择证件类型';
          return msg;
        }
        if (utils.isNull(appointment.identityNo)) {
          msg['result'] = false;
          msg['info'] = '请输入证件号';
          return msg;
        }
        if (appointment.identityType == 1) {
          if (!utils.isCardNo(appointment.identityNo)) {
            msg['result'] = false;
            msg['info'] = '请输入合法的身份证号码';
            return msg;
          }
        }
        if (utils.isNull(appointment.phone)) {
          msg['result'] = false;
          msg['info'] = '请输入您的电话号码';
          return msg;
        }
        if (!utils.checkMobile(appointment.phone)) {
          msg['result'] = false;
          msg['info'] = '请输入正确的手机号';
          return msg;
        }
        let length = peerstaffData.length;
        if (length > 0) {
          for (let key in peerstaffData) {
            let peerstaff = peerstaffData[key];
            if (utils.isNull(peerstaff.userName)) {
              msg['result'] = false;
              msg['info'] = '请输入第' + (key + 1) + '位同行人员姓名';
              return msg;
            }
            if (utils.isNull(peerstaff.userName)) {
              msg['result'] = false;
              msg['info'] = '请输入第' + (key + 1) + '位真实姓名';
              return msg;
            }
            if (utils.isNull(peerstaff.identityType)) {
              msg['result'] = false;
              msg['info'] = '请选择第' + (key + 1) + '位同行人员证件类型';
              return msg;
            }
            if (utils.isNull(peerstaff.identityNo)) {
              msg['result'] = false;
              msg['info'] = '请输入第' + (key + 1) + '位同行人员证件号';
              return msg;
            }
            if (peerstaff.identityType == 1) {
              if (!utils.isCardNo(peerstaff.identityNo)) {
                msg['result'] = false;
                msg['info'] = '请输入第' + (key + 1) + '位同行人员合法的身份证号码';
                return msg;
              }
            }
          }
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      }
    },
    created() {
      this.identityType = this.identityTypeColumns[0].values[0];
      this.appointment['appointType'] = this.$route.query.appointType;
      this.appointment['identityType'] = 1;
      this.appointment['targetId'] = this.$route.query.goodsId;
      this.appointment['originatingPlace'] = this.$route.query.airportName;
      let maxTime = this.$route.query.maxTime;
      this.maxDate = this.$myUtils.computedMaxDate(this.nowDate, maxTime);
    },
    computed: {
      flightDate: {
        get: function () {
          let value = this.nowDate;
          let message = '';
          if (value !== null && typeof value === 'object') {
            let year = value.getFullYear();
            let month = value.getMonth() + 1;
            let date = value.getDate();
            if (month < 10) {
              month = "0" + month;
            }
            if (date < 10) {
              date = "0" + date;
            }
            message = `${year}-${month}-${date}`;
          } else {
            message = value;
          }
          return message;
        },
        set: function (newValue) {
          return newValue;
        }
      },
      takeOffTime: {
        get: function () {
          let value = this.demoTime;
          let message = '';
          if (value !== null && typeof value === 'object') {
            let year = value.getFullYear();
            let month = value.getMonth() + 1;
            let date = value.getDate();
            let hour = value.getHours();
            let minute = value.getMinutes();
            return type === 'date' ? `${year}-${month}-${date}` : `${year}-${month}-${date} ${hour}:${minute}`
          } else {
            message = value;
          }
          return message;
        },
        set: function (newValue) {
          return newValue;
        }
      }
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .xuyuyue {
    padding-bottom: 50px;
  }

  .weui-cell_access {
    margin: 0 15px;
    padding: 15px 0;
    border-bottom: 1px solid transparent;
    text-align: left
  }

  .person > p {
    font-size: 16px;
    color: #111;
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
    z-index: 999;
  }

  .bg {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 50px;
  }

  .model .modelContent {
    background-color: #fff;
    border-radius: 8px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -43%;
    margin-top: -111px;
    z-index: 2;
    padding: 30px 10px 20px;
    width: 80%;

    img {
      position: absolute;
      right: 10px;
      top: 10px
    }

    .btn {
      button {
        height: 42px;
        line-height: 42px;
        color: #fff;
        outline: none;
        border: none;
        width: calc(50% - 20px);
        border-radius: 8px;
        margin-top: 25px;
      }

      :first-child {
        background-color: #ccc;
        margin-right: 20px;
      }

      :last-child {
        background-color: #2f95f0;
      }
    }

    .form-group__message {
      display: none;
      font-size: .95rem;
      color: #CC3333;
      margin-left: 10em;
      margin-bottom: 12px;
    }

    .form-group--error + .form-group__message {
      display: block;
      color: #CC3333;
    }

    .form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea {
      border-color: #CC3333;
    }

  }

</style>
